<template>
  <div id="views">
    <div class="box">
      <input type="radio" id="no" name="isForeign" value="0" v-model="isForeign" checked>
      <label for="no" class="textLeft hoverhand">
        <span class="radioStyle"></span>
        <span>中国大陆用户</span>
      </label>
      <input type="radio" id="is" name="isForeign" value="1" v-model="isForeign">
      <label for="is" class="textRight hoverhand">
        <span class="radioStyle"></span>
        <span>非中国大陆用户</span>
      </label>
    </div>
    <button class="yellowbtn" id="nextStep" @click="nextStep">下一步</button>
  </div>
</template>
<script>
  export default {
      name:'chose_foreign',
      data(){
          return{
              introduce:'选择海外/国内',
              isForeign:0,
              showCardType:false,/*显示选择证件类型*/
          }
      },
      methods:{
          nextStep(){
              if( this.isForeign == 0 ){
                let rechargeVerify = this.$route.query.rechargeVerify || false;
                //rechargeVerify判断是充值校验，还是实名认证
                this.$router.push({path:'/china_verification',query:{rechargeVerify : rechargeVerify}});
              }else{
                 this.$router.push({path:'/foreign_verification'});
              }
          },
      }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{padding:0.3rem;padding-top: 0.42rem}
  .yellowbtn{line-height: 0.88rem;}
  .box{
    background: #fff;padding: 0.37rem 0.24rem;overflow: hidden;
    label{
      position: relative;float: left;padding-left: 0.5rem;
      .radioStyle{
        width: 0.36rem;height: 0.36rem;display: inline-block;border-radius: 50%;overflow: hidden;position: absolute;z-index: 1;
        left: 0;top:50%;margin-top: -0.18rem;background: url('../../common/imgs/radioborder.png') center center no-repeat;background-size: 100% 100%;
      }
    }
    label:last-child{float: right}
  }
  input{width: 0;height: 0;opacity: 0;position: absolute;z-index: 1;}
  input:checked+label>.radioStyle{background: url("../../common/imgs/radiochecked.png") center center no-repeat;background-size: 100% 100%;}

</style>
